<template>
  <div
    class="play-view"
    :style="`background-color: ${
      song?.al?.picUrl || song?.album?.picUrl ? '' : 'red'
    };`"
  >
    <!-- 背景以及遮罩层 -->
    <div
      class="bg"
      :style="`background: url('${
        song?.al?.picUrl || song?.album?.picUrl
      }') center;background-size: cover;`"
    ></div>
    <div class="bg mask"></div>

    <header>
      <i class="iconfont icon-fanhui1 btn-back" @click="$router.go(-1)"></i>
      <div class="info">
        <span>{{ song?.name }}</span>
        <span class="singer-name">
          <span v-for="(ar, i) in song?.ar || song?.artists" :key="i">
            {{ ar.name }}
            {{
              i === (song?.ar?.length || song?.artists?.length) - 1 ? "" : "/"
            }}
          </span>
        </span>
      </div>
      <i class="iconfont icon-fenxiang btn-share"></i>
    </header>

    <section class="main" :class="{ move: !showDisco }">
      <PlayDisco
        @click.native="showDisco = false"
        :song="song"
        :paused="paused"
      ></PlayDisco>
      <PlayLyric
        @click.native="showDisco = true"
        :formatLyric="formatLyric"
        :currentLyric="currentLyric"
      >
      </PlayLyric>
    </section>

    <!-- 歌曲列表弹窗 -->
    <playing-list
      :songList="songList"
      :song="song"
      :songListShow="songListShow"
      :paused="paused"
      :currentModel="currentModel"
      @change-song-from-list="$emit('change-song-from-list', $event)"
      @hide-list="songListShow = false"
      @del-song-from-list="$emit('del-song-from-list', $event)"
      @change-model="$emit('change-model')"
    >
    </playing-list>

    <footer>
      <div class="process-box">
        <span class="time">{{ curTimeFormat }}</span>
        <label class="process">
          <van-slider
            :value="currentT"
            :min="0"
            :max="duration"
            bar-height="1px"
            active-color="#f4f4f4"
            inactive-color="#ddd"
            @input="dragSlibe"
            @change="changeCurrentTime"
            @drag-start="dragStart"
          >
            <template #button>
              <div class="custom-button"></div>
            </template>
          </van-slider>
        </label>
        <span class="time dur">{{ durTimeFormat }}</span>
      </div>

      <div class="controls">
        <!-- 播放模式 -->
        <div class="model" @click="$emit('change-model')">
          <i class="iconfont" :class="currentModel.icon"></i>
          <i v-if="currentModel.name === '单曲循环'" class="one">1</i>
        </div>
        <!-- 上一首 -->
        <div @click="$emit('change-song', 'pre')">
          <i class="iconfont icon-shangyishou"></i>
        </div>

        <div v-if="paused" @click="$emit('audio-play')">
          <i class="iconfont icon-bofang icon-p-style"></i>
        </div>
        <div v-else @click="$emit('audio-pause')">
          <i class="iconfont icon-zanting icon-p-style"></i>
        </div>

        <!-- 下一首 -->
        <div @click="$emit('change-song', 'next')">
          <i class="iconfont icon-xiayishou"></i>
        </div>
        <!-- 歌单列表 -->
        <div @click="songListShow = true">
          <i class="iconfont icon-menu"></i>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import PlayLyric from "@/components/PlayLyric.vue";
import PlayDisco from "@/components/PlayDisco.vue";
import PlayingList from "@/components/PlayingList.vue";
export default {
  props: [
    "song",
    "songList",
    "paused",
    "duration",
    "currentTime",
    "currentModel",
  ],

  data() {
    return {
      showDisco: true,
      currentT: this.currentTime,
      draging: false,
      lyric: "",

      songListShow: false,
    };
  },

  components: {
    PlayLyric,
    PlayDisco,
    PlayingList,
  },

  created() {
    if (!this.song) {
      this.axios
        .get("/song/detail", {
          params: { ids: this.$route.query.id },
        })
        .then((res) => {
          // console.log(res.data.songs[0]);
          this.$emit("change-current-song", { song: res.data.songs[0] });
        });
    }

    this.getLyric();
  },

  computed: {
    curTimeFormat() {
      return this.formatTime(this.currentT);
    },

    durTimeFormat() {
      return this.formatTime(this.duration);
    },

    // 修改歌词格式
    formatLyric() {
      return this.lyric
        .split("\n")
        .filter((o) => o)
        .map((o) => {
          var { groups } = o.match(
            /\[(?<m>\d{2}):(?<s>\d{2}.\d{2,3})\](?<text>.*)/
          );
          return {
            time: groups.m * 60 + groups.s * 1,
            text: groups.text.trim(),
          };
        });
    },

    currentLyric: function () {
      var currentObj = [...this.formatLyric]
        .reverse()
        .find((o) => o.time < this.currentTime);
      // var index = this.formatLyric.findIndex((o) => o === currentObj);
      // return {
      //     ...currentObj,
      //     index,
      // };
      return currentObj;
    },
  },

  watch: {
    currentTime(newTime) {
      if (!this.draging) {
        this.currentT = newTime;
      }
    },

    song() {
      this.getLyric();
    },
  },

  methods: {
    dragStart() {
      this.draging = true;
    },

    dragSlibe(value) {
      this.currentT = value;
    },
    changeCurrentTime(value) {
      this.$emit("change-current-time", value);
      this.draging = false;
    },

    formatTime(time) {
      let minute =
        Math.floor(time / 60) > 9
          ? Math.floor(time / 60)
          : "0" + Math.floor(time / 60);
      let second =
        Math.floor(time % 60) > 9
          ? Math.floor(time % 60)
          : "0" + Math.floor(time % 60);
      return minute + ":" + second;
    },

    getLyric() {
      this.axios
        .get("/lyric", {
          params: { id: this.$route.query.id },
        })
        .then((res) => {
          this.lyric = res.data.lrc.lyric;
        });
    },
  },
};
</script>
<style lang='scss' scoped>
.play-view {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 100vh;
  padding: 10px;

  box-sizing: border-box;
  overflow: hidden;

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    filter: blur(20px);
    z-index: -999;

    &.mask {
      background-color: rgba(0, 0, 0, 0.286);
    }
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .info {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      padding: 5px 0;

      font-size: 16px;
      font-weight: 500;
      color: #fff;

      .singer-name {
        font-size: 12px;
        font-weight: 300;
        color: #eee;
      }
    }

    .btn-back,
    .btn-share {
      width: 30px;
      height: 30px;
      color: #fff;
      font-size: 24px;
    }
  }

  .main {
    flex-grow: 1;
    display: flex;

    width: 730px;
    overflow: auto;

    &.move {
      transform: translateX(-100vw);
    }
  }

  .song-list {
    display: flex;
    justify-content: center;
    align-items: flex-end;

    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;
    z-index: 999;

    background-color: rgba(0, 0, 0, 0.237);
  }

  footer {
    display: flex;
    flex-direction: column;
    justify-content: end;

    .process-box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      padding-top: 30px;

      .time {
        margin-right: 15px;
        overflow: hidden;
        font-size: 12px;
        font-weight: 300;
        color: #fff;

        &.dur {
          margin: 0 0 0 15px;
          text-align: end;
        }
      }

      .process {
        flex: 1;

        .custom-button {
          width: 8px;
          height: 8px;
          background-color: #f8f8f8;
          border-radius: 50%;
        }
      }
    }

    .controls {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 60px;

      .model {
        position: relative;

        & .one {
          position: absolute;
          top: 8.5px;
          left: 8px;

          font-size: 12px;
        }
      }

      i {
        font-size: 24px;
        color: #fff;
      }

      .icon-p-style {
        font-size: 44px;
      }
    }
  }
}
</style>